<template>
  <q-splitter
      v-model="splitterModel"
      style="height: calc(100vh - 50px)"
    >
      <template v-slot:before>
        <q-tabs
          v-model="tab"
          vertical
          class="text-teal shadow-2 text-bold"
        >
          <q-tab name="tab-configuration" label="管理"/>
          <q-tab name="tab-project" label="项目"/>
          <q-tab name="tab-component" label="组件"/>
        </q-tabs>
      </template>
      <template v-slot:after>
        <q-tab-panels
          v-model="tab"
          animated
          transition-prev="slide-down"
          transition-next="slide-up"
        >
          <q-tab-panel name="tab-configuration">
            <q-list>
              <q-item
                clickable
                v-ripple
                @click="onCompanyConfigurationSelected"
              >
                <q-item-section avatar>
                  <q-icon color="primary" name="mdi-bell-check" />
                </q-item-section>
                <q-item-section>
                  <q-item-label>公司管理</q-item-label>
                </q-item-section>
              </q-item>
              <q-item
                clickable
                v-ripple
                @click="onUserConfigurationSelected"
              >
                <q-item-section avatar>
                  <q-icon color="primary" name="mdi-bell-check" />
                </q-item-section>
                <q-item-section>
                  <q-item-label>员工管理</q-item-label>
                </q-item-section>
              </q-item>
              <q-item
                clickable
                v-ripple
                @click="onTupleConfigurationSelected"
              >
                <q-item-section avatar>
                  <q-icon color="primary" name="drafts" />
                </q-item-section>
                <q-item-section>
                  <q-item-label>图元管理</q-item-label>
                </q-item-section>
              </q-item>
              <q-item
                clickable
                v-ripple
                @click="onApplicationConfigurationSelected"
              >
                <q-item-section avatar>
                  <q-icon color="primary" name="mdi-bell-check" />
                </q-item-section>
                <q-item-section>
                  <q-item-label>应用管理</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-tab-panel>
          <q-tab-panel name="tab-project">
            <q-list>
              <q-item
                  clickable
                  v-ripple
                  @click="onProjectListSelected"
                >
                  <q-item-section avatar>
                    <q-icon color="primary" name="mdi-chart-gantt" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>项目列表</q-item-label>
                  </q-item-section>
                </q-item>
            </q-list>
          </q-tab-panel>
          <q-tab-panel name="tab-component">
            <ToolBoxItem
              :menu-list="menuList"
            />
          </q-tab-panel>
        </q-tab-panels>
      </template>

    </q-splitter>
</template>

<script lang="ts">
import { defineComponent, toRefs, onMounted, ref, onBeforeMount, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { CRouteItem } from 'stores/model';
import { useNavTabStore } from 'stores/navTabStore';
import { getMenuTree } from 'src/hook/layout/getMenuTree';
import { uivBaseVOAPI } from 'src/util/UivBaseConst';

import TreeItem from 'layouts/TreeItem.vue';
import ToolBoxItem from 'layouts/ToolBoxItem.vue';
import { useCommonStore } from 'stores/commonStore';
import emitter from '../hook/eventBus';


export default defineComponent({
  name: 'AmyMenuTabs',
  components: {
    TreeItem,
    ToolBoxItem
  },

  setup (props, context) {
    //当前路由
    const route = useRoute();
    const router = useRouter();

    //navStore
    const navStore = useNavTabStore();
    const commonStore = useCommonStore();
    const {
      application
    } = toRefs(commonStore);
    let tab = ref('tab-project');
    let splitterModel = ref(20);

    //********************************************************************
    //      总线消息
    //********************************************************************
    //消息回调函数
    const listenMsg = (msg: any) => {
      tab.value = 'tab-component'
    };


    //********************************************************************
    //                    树形菜单Hook
    //********************************************************************
    //菜单
    const {
      menuList,
      getCurrentMenuTree
    } = getMenuTree();


    //********************************************************************
    //      菜单模块
    //********************************************************************
    //公司配置
    const onCompanyConfigurationSelected = () => {
      //动态路由
      let route = {
        name: 'Company',
        path: '/company'
      };

      //动态路由跳转
      router.push(route.path);
    }

    //员工配置
    const onUserConfigurationSelected = () => {
      //动态路由
      let route = {
        name: 'User',
        path: '/user'
      };

      //动态路由跳转
      router.push(route.path);
    }

    //图元配置
    const onTupleConfigurationSelected = () => {
      //动态路由
      let route = {
        name: 'Tuple',
        path: '/tuple'
      };

      //动态路由跳转
      router.push(route.path);
    }

    //应用配置
    const onApplicationConfigurationSelected = () => {
      //动态路由
      let route = {
        name: 'Application',
        path: '/application'
      };

      //动态路由跳转
      router.push(route.path);
    }

    //设备树选择
    const onProjectListSelected = () => {
      //动态路由
      let route = {
        name: 'Project',
        path: '/project'
      };

      //动态路由跳转
      router.push(route.path);
    }

    //路由跳转
    const openMenu = (link: string) => {
      let u: CRouteItem = {
        name: '',
        path: link,
        meta: {
          icon: '',
          title: ''
        },
        component: '',
        children: []
      };

      // 路径不同就切换下
      if (u.path !== route.path) {
        router.push(u.path);
        navStore.addRouteTabs({
          name: u.meta.title,
          path: u.path
        });
      }
    }

    //当前菜单选中进入路由后状态
    const headerStyleActive = (m: CRouteItem) => {
      if (m.path !== '') {
        if (route.path === m.path) {
          return {
            color: '#1890ff'
          };
        }
      }
      return {};
    }

    //********************************************************************
    //      启动模块
    //********************************************************************
    //初始化
    const init = () => {
      //组件库
      getCurrentMenuTree(uivBaseVOAPI.UIV_MENU_VO_TREE);

      //订阅消息
      emitter.on('update-tab-component', listenMsg);
    }

    //监控tab变化
    watch(tab, () => {
      if (tab.value !== 'tab-component') {
        commonStore.setRightDrawer(false);
      }
    });

    //挂载组件
    onMounted(() => {
      init();
    });

    //挂载组件之前
    onBeforeMount(() => {
      emitter.off('update-tab-component');
    });

    return {
      menuList,
      tab,
      application,
      splitterModel,
      onCompanyConfigurationSelected,
      onUserConfigurationSelected,
      onTupleConfigurationSelected,
      onApplicationConfigurationSelected,
      onProjectListSelected,
      openMenu,
      headerStyleActive
    };
  }
});
</script>

<style lang="scss" scoped>
.my-menu-link {
  color: white;
  background: #F2C037;
}
.my-project-title {
  padding: 0px;
  margin: 0px;
  background: #78c7d5;

}
</style>
